<template>
  <!-- 选择数据来源 即切换项目或楼宇 -->
  <a-modal
    v-model:visible="visible"
    :centered="!isMobile"
    :footer="null"
    :mask="false"
    :maskClosable="false"
    :closable="false"
    :bodyStyle="{
      background: 'transparent',
      padding: 0,
      height: isMobile ? '100vh' : '80vh',
    }"
    :width="isMobile ? '100%' : '80%'"
    :dialogStyle="
      isMobile
        ? {
            position: 'fixed',
            top: '-10px',
            maxWidth: '100%',
          }
        : ''
    "
  >
    <section class="datav-modal">
      <section class="modal-title">
        <span>请选择{{ type == "village" ? "项目" : "楼宇" }}</span>
        <div class="modal-close" v-if="canCancel" @click="onModalClose">
          <CloseCircleFilled :style="{ color: common.theme.lightBlue }" />
        </div>
      </section>
      <section class="modal-content hide-scroller-bar">
        <div v-if="list.length" class="list">
          <div class="item-box" v-for="item of list">
            <BorderBox10
              v-if="current.id && item.id == current.id"
              key="active"
              @click="itemSelect(item)"
            >
              <div class="item active">
                {{ type == "village" ? item.name : item.build_name }}
              </div>
            </BorderBox10>
            <BorderBox6 v-else key="normal">
              <div class="item" @click="itemSelect(item)">
                {{ type == "village" ? item.name : item.build_name }}
              </div>
            </BorderBox6>
          </div>
        </div>
        <div v-else class="loading">
          <Loading />
        </div>
      </section>
      <section class="modal-footer" v-if="list.length">
        <div class="footer-btn" @click.stop="onSubmit">
          <Decoration11>
            <span>{{ confirmTxt }}</span>
          </Decoration11>
        </div>
      </section>
    </section>
  </a-modal>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import common from "../utils/common";
import { CloseCircleFilled } from "@ant-design/icons-vue";
import {
  Decoration11,
  Loading,
  BorderBox6,
  BorderBox10,
} from "@kjgl77/datav-vue3";
import store from "../../../store";

export default defineComponent({
  name: "ChooseDataFrom",
  components: {
    CloseCircleFilled,
    Decoration11,
    Loading,
    BorderBox6,
    BorderBox10,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 渲染数据的来源 village building
    type: {
      type: String,
      default: "village",
    },
    // 是否允许不选择关闭
    canCancel: {
      type: Boolean,
      default: true,
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const initState = {
      current: {},
      list: [],
    };
    const state = reactive({
      ...initState,
    });

    const isMobile = computed(() => store.getters.dataVMobile);

    const confirmTxt = computed(() => {
      if (props.confirmText) {
        return confirmText;
      }
      return props.type == "village" ? "进入" : "确定";
    });

    const itemSelect = (current) => {
      if (current.id == state.current.id) {
        if (props.type == "building") {
          // 取消选中
          state.current = {};
        }
        return;
      }
      state.current = current;
    };

    const onModalClose = () => {
      emit("cancel");
    };

    const onSubmit = () => {
      emit("success", {
        current: state.current,
      });
    };

    const setInitData = () => {
      const { type } = props;
      const datavCurVillage = store.getters.datavCurVillage;
      if (type == "village") {
        state.current = datavCurVillage;
      }
      if (type == "building") {
        state.list = datavCurVillage.buildList;
        state.current = store.getters.datavCurBuilding;
      }
    };

    const init = () => {
      store.dispatch("GetCurrentVillageAndBuild").then((res) => {
        const { villageList, currentVillage } = res;
        state.list = villageList;
        if (!currentVillage.id) {
          store.dispatch("SetCurrentVillage", villageList[0]).then(() => {
            setInitData();
          });
        } else {
          setInitData();
        }
      });
    };

    const reset = () => {
      // reset state
      for (let key in initState) {
        state[key] = initState[key];
      }
    };

    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      common,
      confirmTxt,
      isMobile,
      ...toRefs(state),
      itemSelect,
      onSubmit,
      onModalClose,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../styles/common.less";
.modal-content {
  padding: 0;
  .list {
    display: flex;
    flex-wrap: wrap;
    .item-box {
      padding: 1.5rem 1rem;
      .item {
        padding: 10px 24px;
        font-size: 1.5rem;
        background: rgba(0, 4, 40, 0.38);
        cursor: pointer;
        &:hover {
          background: rgba(0, 4, 40, 0.1);
        }
      }
      .active {
        color: #fff;
        font-weight: bold;
        box-shadow: 0px 0px 1.8rem 0px @primaryColor;
        border-radius: 0.8rem;
      }
    }
  }
}
</style>
